var tel = getCookie("tel")
if(!tel){
    localStorage.setItem("url",location.href);
    $(location).attr('href', 'http://localhost/$$IKEA/junhao-planet/src/sign_in.html');
}

var data = localStorage.getItem("data")
if(!data){
    var str = '';
    str=`
        <div class="blank">
            <h1 class="blank-big">你的购物袋是空的</h1>
            <p class="blank-small">你可以通过搜索或<a href="goods.html" class="blank-to-goods">浏览商品</a>的方式将产品添加到购物袋中</p>
            <div class="blank-img">
                <img src="https://static.web.ikea.cn/static/images/search/alien1.svg" alt="">
            </div>
        </div>
    `
    $(".bag-inner").html(str)
}else{
    loadMask = $("<div>购物袋加载中 . . .</div>").css({
        width:"100%",
        height:"100%",
        background:"#fff",
        opacity:"0.9",
        position:"fixed",
        top:"0",
        left:"0",
        "text-align":"center",
        "line-height":"500px",
        color:"#0058a3",
        fontSize:"32px",
        "font-weight":"700"
    })
    $("body").append(loadMask)
    // 筛选当前账号的购物车商品
    var arr = JSON.parse(data).filter(item=>item.tel === tel)
    // console.log(arr);
    if(arr.length){
        // ajax获取所有商品信息
        // 获取所有商品id
        var ids = arr.map(item=>item.product_id).join()
        $.get("php/bag.php",{ids},res=>{
            var {data,meta:{status,msg}} = res;
            if(status === 2){
                // 内容操作
                var str = '';
                data.forEach(item=>{
                    // 判断商品的id是否等于当前商品的id,将其筛选出来
                    var number = arr.find(v=>v.product_id === item.id).number
                    var price1 = item.price.split(",")
                    var price2 = price1.join("")
                    str = `
                    <div class="bag-goods" data-id="${item.id}">
                        <div class="select-box">
                            <input type="checkbox" checked class="selectOne">
                        </div>
                        <div class="goods-info">
                            <div class="goods-info-left">
                                <a href="detail.html?id=${item.id}">
                                    <img src="${item.delay_path}" style="width:140px hright140px">
                                </a>
                            </div>
                            <div class="goods-info-middle">
                                <p class=" goods-name">${item.name}</p>
                                <p class=" goods-content">${item.info}</p>
                                <p class=" goods-price-box">单价:
                                    <span class="goods-price">￥<a>${item.price}</a>.00</span>
                                </p>
                                <div data-id="${item.id}">
                                    <span class="goods-reduce">-</span>
                                    <input type="tel" class="goods-amount" value="${number}">
                                    <span class="goods-plus">+</span>
                                </div>
                            </div>
                            <div class="goods-info-right">
                                <span class="goods-total-price">￥<a>${price2*number}</a>.00</span>
                                <span class="goods-info-right-bottom" data-id="${item.id}">
                                    <span class="iconfont icon-lajitong" title="删除商品"></span>
                                    <span class="iconfont icon-xihuan" title="收藏"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    `
                    $(".bag-bag").append(str)
                })
                loadMask.remove()
            }else{
                loadMask = $("<div>购物袋加载失败 . . .</div>").css({
                    width:"100%",
                    height:"100%",
                    background:"#fff",
                    opacity:"0.9",
                    position:"fixed",
                    top:"0",
                    left:"0",
                    "text-align":"center",
                    "line-height":"500px",
                    color:"#0058a3",
                    fontSize:"32px",
                    "font-weight":"700"
                })
                $("body").append(loadMask)
                setTimeout(function() {
                    // $(location).attr("href","http://localhost/$$IKEA/junhao-planet/src/detail.html")
                    loadMask.remove()
                }, 1000);
            }

            // 单选全选
            selectAll()
            selectOne()
            // 数量加减
            numberChange()
            // 小计和总计
            total()
            right_total()
            // 数量改变事件
            change()
            // 删除单个商品
            removeSingle()

        },"json")
    }else{
        var str = '';
        str=`
            <div class="blank">
                <h1 class="blank-big">你的购物袋是空的</h1>
                <p class="blank-small">你可以通过搜索或<a href="goods.html" class="blank-to-goods">浏览商品</a>的方式将产品添加到购物袋中</p>
                <div class="blank-img">
                    <img src="https://static.web.ikea.cn/static/images/search/alien1.svg" alt="">
                </div>
            </div>
        `
        $(".bag-inner").html(str)
        loadMask.remove()
    }
}


// 数量的增减
function numberChange(){
    $(".goods-plus").click(function(){
        $(this).prev().val($(this).prev().val()- 0 + 1)
        // 修改本地存储数据
        var data = localStorage.getItem("data")
        data = JSON.parse(data)
        var id = $(this).parent().attr("data-id")
        var obj = data.find(item=>item.product_id === id && item.tel === tel)
        obj.number++,
        localStorage.setItem("data",JSON.stringify(data))

        total()
        $(this).on("selectstart",function(){
            return false
        })
    })
    $(".goods-reduce").click(function(){
        $(this).next().val($(this).next().val()- 0 - 1)
        if($(this).next().val() <= 0){
            $(this).next().val("0")
        }
        // 修改本地存储数据
        var data = localStorage.getItem("data")
        data = JSON.parse(data)
        var id = $(this).parent().attr("data-id")
        var obj = data.find(item=>item.product_id === id && item.tel === tel)
        obj.number--,
        localStorage.setItem("data",JSON.stringify(data))

        total()
        $(this).on("selectstart",function(){
            return false
        })
    })
}

// 小计和总计
function total() {
    var total = 0;
    // 小计
    $(".goods-amount").each(function(i,v){
        var onetotal = v.value * $(v).parent().prev().find("a").text()
        $(v).parent().parent().next().find("a").text(onetotal)
        total += onetotal
    })
    // 总计
    $(".goods-total").find("a").text(total)
    // 购物袋合计
    var bagtotal = $(".goods-total").find("a").text() - $(".line-second").find("a").text() - $(".bag-vip").find("a").text()

    $(".bag-total-price").text(bagtotal)
    right_total()
}

//全选
function selectAll() {
    $(".selectAll").click(function(){
        $(".selectOne").prop("checked",$(this).prop("checked"))
        right_total()
    })
}

// 单选
function selectOne() {
    $(".selectOne").click(function(){
        var arr = Array.prototype.slice.call($(".selectOne"))
        var bool = arr.every(item=>item.checked)
        $(".selectAll").prop("checked",bool)
        right_total()
    })
}

// 结算页小计
function right_total() {
    var singletotal = 0
    if(!$(".selectOne:checked").length){
        $(".goods-total").find("a").text("0")
        $(".bag-total-price").text("0")
        return false
    }
    $(".selectOne:checked").each(function(i,v){
        singletotal += $(v).parent().next().children().eq(2).find("a").text()-0
    })
    
    $(".goods-total").find("a").text(singletotal)
    $(".bag-total-price").text(singletotal)
}

// 数量文本框改变事件
function change() {
    $(".goods-amount").on("input",function(){
        total()
    })
    $(".goods-amount").on("blur",function(){
        if(!$(this).val()){
            $(this).val("0")
        }
        total()
    })
}

// 清空购物车
    var src = '';
    $(".selectall-right").first().click(function(){
        src = `
        <div class="delete-mask">
            <div class="delete-confirm">
                <p class="ok-delete">确定清空购物车吗？</p>
                <span class="go-on">确定删除</span>
                <span class="cancel">取消</span>
            </div>
        </div>
        `
        $("body").append(src)
        $(".go-on").click(()=>{
           
            total()
            right_total()

            $(".selectAll").prop("checked",false)

            var data = localStorage.getItem("data")
            data = JSON.parse(data)
            var dataDel = []
            for(var i=0; i<$(".bag-goods").length;i++){
                var id = $(".bag-goods").eq(i).attr("data-id")
                dataDel = data.findIndex(item=>item.product_id === id && item.tel === tel)
                data.splice(dataDel,1)
            }
            $(".bag-goods").remove()
            localStorage.setItem("data",JSON.stringify(data))
            $(".delete-mask").remove()
        })
        $(".cancel").click(function(){
            $(".delete-mask").remove()
        })
    })

// 删除单条
function removeSingle(){
    $(".goods-info-right-bottom").first().click(function(){
        src = `
        <div class="delete-mask">
            <div class="delete-confirm">
                <p class="ok-delete">确定清空购物车吗？</p>
                <span class="go-on">确定删除</span>
                <span class="cancel">取消</span>
            </div>
        </div>
        `
        $("body").append(src)
        $(".go-on").click(()=>{
            $(this).parent().parent().parent().remove()
            total()
            right_total()
            
            var data = localStorage.getItem("data")
            var data = JSON.parse(data)
            var id = $(this).parent().attr("data-id")
            var index = data.findIndex(item=>item.product_id === id && item.tel === tel)
            data.splice(index,1)
            localStorage.setItem("data",JSON.stringify(data))
            $(".delete-mask").remove()
        })
        $(".cancel").click(function(){
            $(".delete-mask").remove()
        })
    })
}